
{% extends "index.html"  %}
    {% block extends_css %}
        <link href="/static/css/gui.css" rel="stylesheet"></link>
        <link rel="stylesheet" href="/static/css/hopscotch.css">
        <script src="/static/js/graphlib-dot.js"></script>
        <script src="/static/js/dagre-d3.js"></script>
        <script src="/static/js/highlight.min.js"></script>
        <script src="/static/js/arrive.min.js"></script>
        <script>hljs.initHighlightingOnLoad();</script>
    {% end  %}

    {% block content %}
    <div class="content">
        <svg height="100%" width="100%" viewBox="0 0 100 100"  preserveAspectRatio="none">
                <g></g>
        </svg>
        <div id="test"></div>
    </div>
    {% end %}

    {% block tail %}
    {% end %}

    {% block extends_js %}
    <script src="/static/js/d3.v4.js"></script>
    <script src="/static/js/tipsy.js"></script>
    <script src="/static/js/gui.js"></script>
    <script>

        websocket = new web_client("ws://" + document.location.host + "/info");
        websocket.on_msg(function(json){
        console.log(json)
        if (json.hasOwnProperty("text")){
            console.log("Dr")
            tryDraw(json.text)
        }
        // $("#test").html('<pre><code class="python hljs">import ssdf\nprint("hello world")</code></pre>')
        // hljs.initHighlightingOnLoad();
    })
    </script>
    {% end %}

